import React, {Component} from 'react';
import qs from 'querystring'
import './index.less'
import {Affix,PageHeader} from "antd";
import {ShoppingCartOutlined} from '@ant-design/icons'
import {getGoodsDetail} from "../../network/goods";  //ajax
import ImgSwiper from "./ImgSwiper";
import Notice from "../../components/Notice";
import {connect} from "react-redux";
import {addCar} from "../../redux/actions/shopCar";

class GoodsDetail extends Component {
    state = {
        detail: {},
        color: ''
    }
    //通过按钮获得选取颜色，并更改样式
    getColor = (e) => {
        if(e.target.className=== 'colorBtn'){
            this.setState({
                color: e.target.innerHTML
            })
            for(let i = 0;i < this.btnBoss.children.length;i ++){
                this.btnBoss.children[i].className = 'colorBtn'
            }
            e.target.className += ' activeBtn'
        }
    }
    async componentDidMount() {
        //组件挂载时请求数据
        const {gid} = qs.parse(this.props.location.search.slice(1))
        let result = await getGoodsDetail(gid)
        if(result?.code === 200){
            this.setState({
                detail: result.data
            })
        }
    }
    //加入购物车触发函数
    join = () => {
        const {gid} = qs.parse(this.props.location.search.slice(1))
        const {gtitle,gimg,gprice} = this.state.detail
        let userId = sessionStorage.getItem('userId')
        if(userId){
            if(this.state.color === ''){
                Notice('info','颜色未选','请选择颜色后再加入购物车')
            }else{
                let paramsObj ={
                    userid: userId,
                    gid,
                    gname: gtitle,
                    gimg: gimg[0],
                    gcount: 1,
                    gprice,
                    gcolor: this.state.color
                }
                this.props.addCar(paramsObj)
                Notice('success','加入购物车成功','您将会在购物车中看到此商品')
            }
        }else{
            Notice('warning','用户未登录','请登录后在进行此操作')
        }
    };
    render() {
        const {gtitle,gimg,gdesc,gcolor,gdetail,gserver,gprice} = this.state.detail
        return (
            <div className='GoodsDetail'>
                <Affix offsetTop={0}>
                {/*详情页头部返回按钮*/}
                <div className="DetailTitle">
                        <PageHeader
                            className="MyPageHeader"
                            onBack={() => this.props.history.go(-1)}
                            title={gtitle}
                        />
                </div>
                </Affix>
                {/*详情数据展示*/}
                <div className="DetailShow">
                    <div className="container">
                        <div className='listBox'>
                            {/*左侧图片轮播图组件*/}
                            <div className="leftImg">
                                <ImgSwiper img={gimg}/>
                            </div>
                            {/*右侧详情数据*/}
                            <div className="rightList">
                                <div className='dTitle'>{gtitle}</div>
                                <div className='dDesc'>{gdesc}</div>
                                <div className='dColor'>颜色选择:</div>
                                <div ref={node => this.btnBoss = node} className='btnGroup' onClick={this.getColor}>
                                    {
                                        gcolor?.map(item => {
                                            return (
                                                <div className='colorBtn' key={item}>{item}</div>
                                            )
                                        })
                                    }
                                </div>
                                <div className='dCon'>配置:{gdetail}</div>
                                <div className='dServer'>服务说明:{gserver}</div>
                                <div className='choose'>
                                    *你选择了{gtitle},颜色:{!this.state.color ? '暂未选择' : this.state.color}
                                </div>
                                <div className='cprice'>
                                    ￥{gprice}
                                </div>
                                <div className='joinCar' onClick={this.join}>
                                    Add<ShoppingCartOutlined />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(state=>state,{addCar})(GoodsDetail);